<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>IFrame</title>
<!-- load style sheet-->

<link rel="stylesheet" type="text/css" href="themes/paper.css" media="all" >
<!-- load jquery library-->
<script src="jquery-1.4.js"></script>

<!-- debug.js
<script src="jquery.dump.js"></script>
-->
<script>
<!--
//These data must be moved after release.
var query;

/*@todo has problem 
chrome.extension.onRequest.addListener(function(request, sender){
	console.log("receive now.");
	alert (request.query);
	query = request.query;
});
*/

query =	window.location.search.substring(1);

while(!query){
query = "error";//do nothing but just wait
}

//alert(query);

var sl = "en";
var tl = "zh";
-->
</script>
<script>
var src=
"http://www.google.com/dictionary/json?q="+query+"&sl="+sl+"&tl="+tl+"&restrict=pr,de&client=te";

jQuery.getJSON(src+"&callback=?",　function(data)　{　
　　	
	//alert("query:　"　+　data.query);
	//document.write( $.dump(data) );
	var link = "http://www.google.com/dictionary?langpair="+sl+"|"+tl+"&q="+query+"&hl=en&aq=f";
	changeDictionaryTitle("key",
	"<a href='"+link+"' target='_blank'>"+data.query+"</a>");
	if(data.primaries){
		var primary = data.primaries[0];
		primaryDefines(primary);
	} else if(data.webDefinitions){
		//alert("web");
		webDefine(data.webDefinitions[0]);
	} else {
		document.getElementById("meaning").innerHTML="online-dict 不能找到单词释义.";
		//没有任何释义...
	}

});
/*
 *
 *
 */

function primaryDefines(primary){
	
	 if( primary.type == "headword" ){
		for ( var term in primary.terms ){
			var value = primary.terms[term];
			
			if(value.type == "phonetic"){
				if ( value.labels[0].text == "KK" ) break; //api里有两个音标
				changeDictionaryTitle("pron",value.text);
			} else if(value.type == "sound"){
				changeDictionaryTitle("audio",value.text);
			}
		}
	}
	
	if(!primary.entries) return;
	
	for (var i in primary.entries){
		//document.write( $.dump(entry) );
		entry = primary.entries[i];
		var en ;
		var zh ;
		var partOfSpeech;//词性
		if(entry.type=="container"){
			if(entry.labels[0].title=="Part-of-Speech"){//有多个词性
				partOfSpeech = entry.labels[0].text;
				en  = ListDefine( entry.entries , "en" );
				zh  = ListDefine( entry.entries , "zh-Hans" );
			}
		} else if (entry.type=="meaning"){
				if(entry.labels) 
					partOfSpeech = entry.terms[1].labels[0].text;
				else
					partOfSpeech = "webDefinitions";
				
				en = ListDefine(entry,"en");
				zh = ListDefine(entry,"zh");
			}
			var define = document.createElement("div");
			define.class = "define";
			var span = document.createElement("span");
				span.innerHTML=partOfSpeech;
			define.appendChild(span);
			var meanings = document.createElement("div");
			
			
			
			
		for( var i=0;zh[i]||en[i];i++ ){
			var html;
			html="<li>";
			if (zh[i]){
				html+=zh[i];
			}
			if(en[i]){
				html+="<em>" +en[i] +"</em>";
			}
				//alert(html+"n");//debug
				meanings.innerHTML += html;
			}
		}
			define.appendChild(meanings);
		//var partofspeech = entry.labels[0].text;
			document.getElementById("meaning").appendChild(define);
}


/*
 * List Web Define of a word.
 * @TODO:finish the function
 *
 */


function webDefine(headword){
	return primaryDefines(headword);
}

/**
 * @param array defines a part of the json.
 * @param string language "en" for English "zh-Hans" for Chinese
 * return array of defines.
 */


function ListDefine( defines , language ){
	//document.write( $.dump(defines) );
	
	//alert("listdefining");
	var result = new Array();
	
	if(defines.type == "meaning"){
		defines[0] = defines;
	}
		for ( var i in defines ){
			item = defines[i];
			if(item.type == "meaning"){
				for (var i in item.terms){
					define = item.terms[i];
					if( define.language == language ){
						result.push( define.text );
					}
				}
			}
		}
	
	//document.write( $.dump(result) );
	return result;
}
/*
 * List Examples of a word.
 * @param defines
 * @param flag
 * @TODO finish the function
 *
 */

function listExamples( defines , flag ){
	
	
}




/**
 * Change the html body by it's id. 
 *
 */
function changeDictionaryTitle( key , value ){
	if(!value){return;}
	if(key=="audio"){
				document.getElementById("sound").appendChild ( 
				createAudioObject( value )
			);
	} else if (key=="pron"){
		document.getElementById("sound").appendChild ( 
		createPronLabel( value ));
	} else {
		document.getElementById(key).innerHTML = value;
	}
}

function createPronLabel( label ){
	var span = document.createElement("span");
	span.class = "pron";
	span.innerHTML = label;
	return span ;
}

/**
 * @patam string url : 
 * @return Object Element.
 * @todo if no flash player add image and link to it.
 * 
 * 
 */

function createAudioObject( url ){
	var span = document.createElement("span");
	var html = "<object data='http://www.google.com/dictionary/flash/SpeakerApp16.swf' type='application/x-shockwave-flash' width='16' height='16' id='pronunciation'>";
	html+="<param name='movie'value='http://www.google.com/dictionary/flash/SpeakerApp16.swf'><param id='audioParam' name='flashvars' value='";
		html+=
"sound_name="+encodeURIComponent(url)+"'></param>";
html+="<param name='wmode' value='transparent'></param><a href='"+url+"'>";

html+="<img border='0' width='16' height='16' src='http://www.google.com/dictionary/flash/SpeakerOffA16.png' alt='listen'></a></object>";
	span.innerHTML = html; 
	return span;
}
</script>
</head>
<body style="margin:0px;">
<div id="main">
  <div id="tool" style="float:right;clear:both;margin-top:0px; display:none;">
	<label>Remeber It</label>
    <img src="http://www.google.com/dictionary/image/unstarred.gif"> </div>
  <br />
  <div id="title" style="float:left;maigin-top:10px;clear:both;"> <span id="key" style="font-family: Arial, 
				sans-serif;
				font-size: 1.33em;
				font-weight: bold;
				line-height: 1em;">Finding......</span> <span style=""> </span>
    <div id="sound"> 
      
      <!--	
	<span id="pron" style="font-size: 0.9em;
				font-weight: normal;
				font-family: "Doulos SIL","Gentium","TITUS Cyberbit Basic","Junicode","Aborigonal Serif","Arial Unicode MS","Lucida Sans Unicode","Chrysanthi Unicode","DejaVu Sans",Sans-serif;
				white-space: nowrap;
				line-height: 1em;
				"></span>
	<span id="audio" style="margin-top: 1px;
				position: relative;
				top: 2px;
				margin: 0px;
				padding: 0px;
				font-family: Arial, sans-serif;
				font-size: 1.33em;
				font-weight: bold;
				line-height: 1em;
				">

<object data="http://www.google.com/dictionary/flash/SpeakerApp16.swf" type="application/x-shockwave-flash" width=" 16" height="16" id="pronunciation"> 

	<param name="movie" value="http://www.google.com/dictionary/flash/SpeakerApp16.swf"> 

	<param id="audioParam" name="flashvars" value="sound_name=http%3A%2F%2Fwww.gstatic.com%2Fdictionary%2Fstatic%2Fsounds%2Fxy%2F0%2F18%2F18622.mp3" ></param>

	<param name="wmode" value="transparent"> </param>

	<a href="http://www.gstatic.com/dictionary/static/sounds/xy/0/18/18622.mp3"><img border="0" width="16" height="16" src="http://www.google.com/dictionary/flash/SpeakerOffA16.png" alt="listen"></a> 

	</object>
	</span>
--> 
      
    </div>
    <!-- end of sound div--> 
    
  </div>
  <!-- end of title div--> 
  <br />
  <div id="meaning" style="margin-top:15px;"></div>
</div>
<!-- end of main div--> 
<script>
//createAudioObject($audio);
</script>
</body>
</html>
